<template>
  <div>
    <table class="table table-bordered">
      <tbody>
        <tr>
            <td>房号</td>
            <td>
                <input type="text" v-model="data.rname" />
            </td>
            <td>房型</td>
            <td>
                <input type="text"  v-model="data.tname" />
            </td>
            <td><input type="button" value="查询" @click="list()" /></td>
            <td><input type="button" value="重置" @click="res()" /></td>
        </tr>
      </tbody>
    </table>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>序号</td>
          <td>房号</td>
          <td>房型</td>
          <td>操作</td>
        </tr>
        <tr v-for="a in info.list" :key="a.rid">
          <td>{{ a.rid }}</td>
          <td>{{ a.rname }}</td>
          <td>{{ a.tname }}</td>
          <td>
            <td><input type="button" value="修改" @click="update(a.rid)" /></td>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { reactive, onMounted } from "vue";
let info: any = reactive({
  list: [],
});
let data = reactive({
    rname:'',
    tname:''
});
onMounted(() => {
  list();
});
const res = () => {
    data.rname="";
    data.tname="";
};
const update = (rid:any) => {
};
const list = () => {
  axios({
    url: "/api/User/Getlist",
    method: "get",
    params:data
  }).then((res) => {
    console.log(res);
    info.list = res.data;
  });
};
</script>

<style scoped></style>
